<template>
  <div class="grid grid-rows-[80px_1fr]">
    <!-- header 第一行-->
    <div class="bg-[#ecf0f1] py-2 px-4 flex justify-between items-center">
      <div>
        <div class="flex flex-row items-center justify-center gap-2">
          <div class="font-bold text-sm">{{ zone?.name }}</div>
          <el-button type="primary" size="small" @click="addData">添加数据</el-button>
        </div>
        <div class="text-xs text-gray-400">{{ zone?.proj.shortName }}</div>
      </div>

      <div class="flex items-center gap-2">
        <el-button type="primary" @click="updateData">更新</el-button>
        <!-- <el-button type="primary" @click="$router.push({ name: 'image', params: { id: zoneId } })">作业图</el-button> -->
        <el-button type="primary" @click="openImageTab">作业图</el-button>
        <!-- <el-button-group>
          <el-button type="primary" size="small" @click="">铁塔</el-button>
          <el-button type="primary" size="small" @click="">控制点</el-button>
          <el-button type="primary" size="small" @click="">导线及引绳</el-button>
          <el-button type="primary" size="small" @click="">方向</el-button>
        </el-button-group> -->
      </div>
    </div>

    <div class="h-full">
      <!-- 铁塔列表 -->
      <div class="p-2 rounded-sm bg-[#ecf0f1]">
        <TowerTable :towers="towers" />
      </div>

      <!-- 塔间列表 -->
      <div class="p-2 rounded-sm bg-[#ecf0f1]">
        <BetTable :bets="bets" />
      </div>
      <!-- 其他列表 -->
      <div></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import read from '@/common/readData'
import { read } from '@/common/readData'
import BetTable from '@/components/table/BetTable.vue'
import TowerTable from '@/components/table/TowerTable.vue'
import useBet from '@/composables/useBet'
import useTower from '@/composables/useTower'
import useZone from '@/composables/useZone'
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'

const route = useRoute()
const { find, zone } = useZone()
const { all: allTower, towers } = useTower()
const { all: allBet, bets } = useBet()

const channel = new BroadcastChannel('myChannel')
const zoneId = ref(+route.params.zoneId)

/**
 * 读取数据后，页面不能立即显示
 * 问题还是没有找出来，初步判断是异步的原因
 */
async function addData() {
  await read(zoneId.value)
}

onBeforeRouteUpdate(async (to) => {
  zoneId.value = +to.params.zoneId
  await find(+to.params.zoneId)
  await allTower({ zoneId: +to.params.zoneId })
  await allBet({ zoneId: +to.params.zoneId })
})

async function updateData() {
  await allTower({ zoneId: +route.params.zoneId })
  await allBet({ zoneId: +route.params.zoneId })
}

function openImageTab() {
  const IsImgTab = localStorage.getItem('IsImgTab')

  if (IsImgTab) {
    channel.postMessage(+route.params.zoneId)
  } else {
    window.open('http://localhost:5173/home/image1')
    localStorage.setItem('IsImgTab', 'true')
  }
}

find(+route.params.zoneId)
allTower({ zoneId: +route.params.zoneId })
allBet({ zoneId: +route.params.zoneId })
</script>

<style></style>
